<template>
  <a-card :bordered="false">
    <div class="table-operator">
      <a-button @click="$refs.table.refresh(true)">刷新</a-button>
    </div>
    <s-table
      size="default"
      ref="table"
      rowKey="id"
      :rowSelection="null"
      :columns="columns"
      :data="loadData"
    >
      <span slot="serial" slot-scope="text, record, index">
        {{ (pageNum-1) * pageSize + index + 1 }}
      </span>
      <span slot="url" slot-scope="text">
        <img style="height: 80px;cursor: pointer;" :src="text" alt="" @click="$refs.bigImg.show(text)">
      </span>
      <span slot="action" slot-scope="text, record">
        <a @click="handleRecord(record)">数据恢复</a>
      </span>
    </s-table>
    <big-img ref="bigImg" />
  </a-card>
</template>

<script>
import { STable } from '@/components'
import { extSmallDetailList, extSamllDetailRecover } from '@/api/system/system'
import bigImg from '@/components/commonDialog/bigImg'
export default {
  name: 'SmallDetail',
  components: {
    STable,
    bigImg
  },
  data () {
    return {
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },

      // 查询参数
      queryParam: { status: '' },
      // 表头
      columns: [
        {
          title: '序号',
          scopedSlots: { customRender: 'serial' },
          width: '80px'
        },
        {
          title: '图片',
          dataIndex: 'url',
          ellipsis: true,
          width: '250px',
          scopedSlots: { customRender: 'url' }
        },
        {
          title: '标题',
          dataIndex: 'title',
          ellipsis: true
        },
        {
          title: '操作',
          width: '150px',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      selectedRowKeys: [],
      selectedRows: [],
      ids: [],
      pageNum: 1,
      pageSize: 10,
      id: '',
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        var params = {
          current: parameter.pageNum,
          size: parameter.pageSize,
          pid: this.id,
          deleted: true
        }
        return extSmallDetailList(Object.assign(params, this.queryParam)).then(res => {
          this.pageNum = parameter.pageNum
          this.pageSize = parameter.pageSize
          this.selectedRowKeys = []
          this.selectedRows = []
          this.ids = []
          return res
        })
      }
    }
  },
  created () {
    this.id = this.$route.query.id
  },
  methods: {
    handleReload () {
      this.$refs.table.refresh()
    },
    handleRecord (info) {
      var _this = this
      this.$confirm({
        title: '数据恢复?',
        content: '是否确定恢复该明细?',
        onOk () {
          var params = {
            id: info.id
          }
          extSamllDetailRecover(params).then(res => {
            if (res.code === 0) {
              _this.$message.success(`恢复成功`)
              _this.handleReload()
            } else {
              _this.$message.error(res.msg)
            }
          })
        },
        onCancel () {}
      })
    },

    onSelectChange (selectedRowKeys, selectedRows) {
      this.ids = []
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      for (var item of selectedRows) {
        this.ids.push(item.id)
      }
    }
  }
}
</script>
